<template>
    <div class="articles" >
        <div class="art-main" @click="toArticleDetail">
            <image class='art-r' :src='data.thumbnail'></image>
            <div class="art-l">
                <text class='art-tit limit-two'>{{data.title}}</text>
                <text class='art-desc limit-four'>{{data.summary}}</text>
            </div>
        </div>
        <div class="social-status">
            <div class="see">
                <text class="seeicon iconfont" >&#xe635;</text>
                <text>{{data.viewCount || 0}}</text>
            </div>
            <div class="love" @click="loveClick">
                <text class="loveicon iconfont stared" v-if='data.stared'>&#xe637;</text>
                <text class="loveicon iconfont" v-else>&#xe637;</text>
                <text>{{data.starCount || 0}}</text>
            </div>
            <div class="share" @click="shareWX">
                <text class="shareicon nativeplusfont" >&#xe660;</text>
                <text>{{data.shareCount || 0}}</text>
            </div>
        </div>
    </div>
</template>
<script>
    const modal = weex.requireModule('modal');
    var bmWXShare = weex.requireModule('bmWXShare')
    import {weburl }from './weburl';
    export default {
        props: ["data"],
        data: () => ({
        }),
        created(){
            
        },
        computed: {
        },
        methods: {
            loveClick(){
                let vm = this;
                var userInfo = this.$storage.getSync('UserInfo');
                this.token = userInfo.token;
                if(this.data.stared == 0){
                    //代表赞
                    this.data.stared = 1;
                    let id = this.data.id;
                    this.data.starCount = this.data.starCount || 0;
                    this.data.starCount +=1;
                    //获取石头币明细接口
                   
                    this.$fetch({
                        method: 'POST',    // 大写
                        name: 'article.star', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                        data: {
                            "id":id ,
                        },
                        header: {
                            'X-TMACW-APP-Token': this.token
                        }
                    }).then(resData => {
                        // 成功回调
                        console.log(":::::::::::::::消息列表::::::::::::::::::::::")
                        console.log(resData)
                        if(resData && resData.errno == 0){
                            
                        } else {
                            this.$notice.toast({ message: resData.errmsg})
                        }
                    }, error => {
                    
                        this.$notice.toast({ message: "获取失败, 请重试"})
                    })
                }else{
                    //代表踩
                    this.data.stared = 0;
                    let id = this.data.id;
                    this.data.starCount = this.data.starCount || 0;
                    this.data.starCount -=1;
                    //获取石头币明细接口
                    this.$fetch({
                        method: 'POST',    // 大写
                        name: 'article.starcancel', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                        data: {
                            "id":id ,
                        },
                        header: {
                            'X-TMACW-APP-Token': this.token
                        }
                    }).then(resData => {
                        // 成功回调
                        console.log(":::::::::::::::消息列表::::::::::::::::::::::")
                        console.log(resData)
                        if(resData && resData.errno == 0){
                            
                        } else {
                            this.$notice.toast({ message: resData.errmsg})
                        }
                    }, error => {
                    
                        this.$notice.toast({ message: "获取失败, 请重试"})
                    })
                }
            },
            shareClick1(){
                let id = this.data.id;
                //获取石头币明细接口
                let vm = this;
                var userInfo = this.$storage.getSync('UserInfo');


                this.token = userInfo.token;
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'article.share', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {
                        "id":id ,
                    },
                    header: {
                        'X-TMACW-APP-Token': this.token
                    }
                }).then(resData => {
                    // 成功回调
                    console.log(":::::::::::::::消息列表::::::::::::::::::::::")
                    console.log(resData)
                    if(resData && resData.errno == 0){
                        
                    } else {
                        this.$notice.toast({ message: resData.errmsg})
                    }
                }, error => {
                   
                    this.$notice.toast({ message: "获取失败, 请重试"})
                })
            },
            shareWX() {
                const vm = this;

                var result = bmWXShare.isInstallWXApp()

                if(!result) {
                    this.$notice.toast({ message: "请先安装微信客户端！"})
                    return;
                }
                var title = encodeURIComponent(this.data.title);
                var userInfo = this.$storage.getSync('UserInfo');
                let id = this.data.id;
                let token = userInfo.token;
                var url = `${weburl}#/article/id/${id}/title/${title}/token/${token}`;
               
                bmWXShare.share({
                    title:vm.data.title, // 分享的标题
                    content:vm.data.summary, // 分享的文字内容
                    url: url, // 分享对应的URL地址，如h5、音乐链接、视频链接、小程序的链接
                    // url: 'https://www.zosto.net/app/share', // 分享对应的URL地址，如h5、音乐链接、视频链接、小程序的链接
                    image: 'https://www.zosto.net/logo.png', // 分享的图片url
                    // url: 'https://www.gh-cms.com/app/share', // 分享对应的URL地址，如h5、音乐链接、视频链接、小程序的链接
                    // image: 'https://www.gh-cms.com/logo.png', // 分享的图片url
                    // path: '', // 分享小程序用到的页面路径
                    // userName: '' // 小程序名称
                    shareType: 'Webpage', // 分享的类型
                    platform: 'WechatSession' // 分享平台 朋友圈/好友（注意：历史版本的字段名是platforms,现在是一个字符串而不是数组）
                },function(resData){ // 注意： 历史版本返回的是一个promise对象，现在的是callback回调     
                    // 成功回调
                    console.log(":::::::::::::::::::::::::::::::Sucess");
                    console.log(resData);
                    vm.$notice.toast({ message: "分享成功"})
                    vm.wxShareSuccess();
                },function(resData){
                    // 失败回调
                    console.log(":::::::::::::::::::::::::::::::Failer");
                    console.log(resData);
                    vm.$notice.toast({ message: "分享失败"})
                })
            },
            wxShareSuccess(){
                let id = this.data.id;

                //分享 数量+1
                this.data.shareCount = this.data.shareCount || 0;
                this.data.shareCount +=1;
                
                //获取石头币明细接口
                let vm = this;
                var userInfo = this.$storage.getSync('UserInfo');


                this.token = userInfo.token;
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'article.share', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {
                        "id":id ,
                    },
                    header: {
                        'X-TMACW-APP-Token': this.token
                    }
                }).then(resData => {
                    // 成功回调
                    console.log(":::::::::::::::消息列表::::::::::::::::::::::")
                    console.log(resData)
                    if(resData && resData.errno == 0){
                        
                    } else {
                        this.$notice.toast({ message: resData.errmsg})
                    }
                }, error => {
                   
                    this.$notice.toast({ message: "获取失败, 请重试"})
                })
            },
            toArticleDetail(){
                var title = encodeURIComponent(this.data.title);
                let id = this.data.id;
                
                var userInfo = this.$storage.getSync('UserInfo');


                let token = userInfo.token;
                var url = `${weburl}#/article/id/${id}/title/${title}/token/${token}`;
                // this.$notice.alert({
                //     title: '这是一个弹窗',
                //     message: url,
                //     okTitle: '确认',
                //     callback() {
                //         // 点击确认按钮的回调
                //     }
                // })
                // this.$router.toWebView({
                //     url: url,                                    // 页面 url 支持打开本地的html文件 比如：bmlocal://assets/test.html
                //     title: this.data.title,                                  // 页面 title
                //     navShow: true                               // 是否显示native端导航栏，默认是true
                // })
                this.$router.open({
                    name: 'zst.article.web',
                    type: 'PUSH',
                    params: {'url':url,'id':id},
                    navShow:true,
                    navTitle:this.data.title
                })
            }
            
        }
    }
</script>

<style lang="scss" scoped>
@import 'src/js/css/core/base.scss';

.stared{
    color:red;
}
.iconfont {
    font-family: iconfont;
}
.nativeplusfont {
    font-family: nativeplusfont;
}
.articles{
    padding-top:20px;
    padding-bottom:20px;
    padding-left:24px;
    padding-right:24px;
    backgroundColor:#fff;
    margin-bottom:20px;
}
.art-main{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
.art-l{
    flex:1;
}
.art-tit{
    color:#333;
    font-size:30px;
    font-weight:bold;
    margin-bottom:20px;
}
.art-desc{
    max-height:130px;
    overflow: hidden;
    color:#666;
    font-size:24px;
}
.art-r{
    width:204px;
    height:192px;
    margin-right:20px;
}
.social-status{
    display:flex;
    flex-direction: row;
    margin-top:20px;
}
.see{
    margin-left:106px;
    display:flex;
    flex-direction: row;
    align-items: center;
}
.seeicon,.loveicon,.shareicon{
    /* width:30px;
    height:30px; */
    font-size:30px;
    margin-right:5px;
}
.seeicon{
    font-size:45px;
}
.love{
    margin-left:138px;
    display:flex;
    flex-direction: row;
}
.share{
    margin-left:138px;
    display:flex;
    flex-direction: row;
}
</style>